<template>
    <div class="index" ref="indexWrapper">
        <scroll :data="recommends" ref="scroll">
            <div class="layer"></div>
            <div class="swipe-layer">
                <div class="swipe-wrapper">
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item class="item-swipe" v-for="item in banners" :key="item.pic">
                            <img @load="refresh" :src="item.pic" width="100%" alt="">
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </div>
            <div class="recommend-title">
                <div class="title">推荐歌单</div>
                <!-- <router-link tag="div" to="/index/more" class="more">更多</router-link> -->
            </div>
            <div class="recommend-wrapper">
                <ul class="recommend-list clearfix" v-if="recommends.length">
                    <li class="item-recommend" v-for="item in recommends" :key="item.id" @click="getDetail(item)">
                        <div class="recommend-cover">
                            <img @load="refresh" v-lazy="item.picUrl" width="100%" alt="">
                            <div class="mask"></div>
                            <div class="play-count">
                                <span class="iconfont icon-bofang"></span>
                                <span class="count">{{formatPlaycount(item.playCount)}}</span>
                            </div>
                        </div>
                        <p class="recommend-name van-ellipsis">{{item.name}}</p>
                    </li>
                </ul>
                <loading v-if="!recommends.length"></loading>
            </div>
            <div class="title">最新音乐</div>
            <ul>
                <li class="item-song" v-for="(item,index) in newsongs" :key="item.id" @click="getSong(item,index)">
                    <img class="newsong-cover" @load="refresh" v-lazy="item.picUrl" alt="" width="100%">
                    <div class="newsong-info">
                        <p class="name">
                            <span class="song-name">{{item.song.name}}</span>   
                            <span class="alias">{{item.song.alias[0]}}</span> 
                        </p>
                        <p class="singer">{{item.song.artists[0].name}}-{{item.song.name}}</p>
                    </div>
                </li>
            </ul>
        </scroll>
        <transition name="van-slide-right">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import { getBanners, getRecommends, getNewsongs } from 'api/api'
import Scroll from 'components/scroll/scroll'
import Loading from 'components/loading/loading'
import { Swipe, SwipeItem } from 'vant'
import { playerMixin } from 'common/js/mixin'
import { mapMutations, mapActions, mapGetters} from 'vuex'
export default {
    name: "",
    mixins: [playerMixin],
    data() {
        return {
            banners: [],
            recommends: [],
            newsongs: []
        }
    },
    mounted() {    
        let getBanner = getBanners({type:1})
        let getRecommend = getRecommends({type:1,limit:12})
        let getNewsong = getNewsongs({type:1})
        Promise.all([getBanner,getRecommend,getNewsong]).then(res=> {
            this.banners = res[0].banners
            this.recommends = res[1].result
            this.newsongs = res[2].result
        })
    },
    methods: {
        refresh() {
            this.$refs.scroll.refresh()
        },
        formatPlaycount(count) {
            if(count >= 10000 ) {
                count = `${(count / 10000).toFixed(2)}w`
            }
            return count
        },
        handlePlaylist(list) {
            if(list.length) {
                this.$refs.indexWrapper.style.bottom = `60px`
            }else{
                this.$refs.indexWrapper.style.bottom = `0px`            
            }
            this.$refs.scroll.refresh()
        },
        getDetail(item) {
            this.$router.push({
                path:'/index/detail',
                query:{
                    id:item.id,
                    cover:item.picUrl,
                    title:item.name
                }
            })
        },
        getSong(item,index) {
            let list = this.song(this.newsongs) 
            let id = this.newsongs[index].id
            console.log(list)
            this.setPlaylist({id,index,list})
            this.getSongSource()
        },
        song(list) {
            return list.map(item=> {
                item.ar = [item.song.artists[0]]
                item.al = item.song.album
                return item
            })
        },
        ...mapActions({
            setPlaylist: 'getCurrentSong',
            getSongSource: 'getSongSource'
        })
    },
    components: {
        Scroll,
        Loading,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem
    }
};
</script>

<style scoped lang="less">
    .index {
        overflow: hidden;
        position: fixed;
        top: 76px;
        left: 0;
        bottom: 0;
        right: 0;
        .layer{
            z-index:-10;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 50vh;
            transform: translate3d(0,-85%,0);
            background: #d43c33;
        }
        .swipe-layer{
            width: 100%;
            height: 70px;
            padding-top: 10px;
            margin-bottom: 80px;
            border-radius: 0 0 5px 5px;
            background: #d43c33;
            .swipe-wrapper{
                overflow: hidden;
                margin: 0 auto;
                width: 90%;
                height: 0;
                padding-bottom: 35%;
                border-radius: 8px;
                background: #eee;
            }
        }
        .title{
            position: relative;
            margin:  10px 0 15px 20px;
            font-size: 18px;
            &::before{
                content: '';
                position: absolute;
                top: 52%;
                transform: translate3d(0,-50%,0);
                left:-10px;
                display: block;
                width: 4px;
                height: 18px;
                background: #d43c33;
            }
        }
        .recommend-title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px 0 0;
            .more{
                padding: 4px 8px;
                border: 1px solid #999;
                border-radius: 10px;
                font-size: 12px;
            }
        }
        .recommend-wrapper{
            position: relative;
            margin-top: -10px;
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
            min-height: 536px;
            .item-recommend{
                width: 33.33%;
                padding: 10px 10px 0 10px;
                box-sizing: border-box;
                float: left;   
                .recommend-cover{
                    position: relative;
                    width: 100%;
                    height: 0;
                    padding-bottom: 100%;
                    background: #eee;
                    .mask{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0,0,0,.2);
                    }
                    .play-count{
                        position: absolute;
                        right: 5px;
                        top: 5px;
                        font-size: 0;
                        color: #f7f7f7;
                        .iconfont{
                            vertical-align: middle;
                            font-size: 14px;
                        }
                        .count{
                            vertical-align: middle;    
                            font-size: 12px;
                        }
                    }
                    img{
                        border-radius: 4px;
                    }
                } 
                .recommend-name{
                    line-height: 24px;
                    color: #888;
                }
            }
        }
        .item-song{
            display: flex;
            align-items: center;
            padding:0 20px 20px 20px;
            font-size: 17px;
            .newsong-cover{
                width: 70px;
            }
            .newsong-info{
                margin-left: 15px;
                flex: 1;
                .alias{
                    color: #888;
                }
                .singer{
                    line-height: 22px;
                    font-size: 12px;
                }
            }

        }
    }
</style>
